<template>
	<view class="root-lay">
		<view class="head-lay flex-h">
			<view class="head-title">{{headTitle}}</view>
			<view class="head-right flex-h" v-show="isOptEnable">
				<view class="head-tool" @click="onDelClick">{{$t('public.remove')}}</view>
				<view class="head-tool" @click="onRenameClick">{{$t('public.rename')}}</view>
			</view>
		</view>
		<view class="content-lay">
			<view class="step-1" v-if="showType == 0">
				<view class="table-lay">
					<vTable :columns="headData" :list="contentData" :height="150" selection="single"
						@on-selection-change="onSelectionChange" :row-class-name="rowClassName"
						:td-height="40" :th-td-height="40">
					</vTable>
					
					
<!-- 					<v-table ref="vTableRef" class="table-lay" :columns="headData" :list="contentData" :height="tableHeight"
						:td-height="40" :th-td-height="40"
						selection="single" @on-selection-change="onSelectionChange" :row-class-name="rowClassNameFn"
						:slot-cols="['isp_date','this_thck','temperature', 'corrvalue']">
						<template v-slot="{ row ,rowKey }">
							<view :style="genCellStyle(row, rowKey)">{{row[rowKey]}}</view>
						</template>
					</v-table> -->
				</view>
			</view>

			<view class="step-2" v-if="showType == 1">
				<view class="form-lay">
					<view class="info-line flex-h">
						<view class="info-title">{{$t("functionSelect.tableHeadPlant")}}：</view>
						<view class="info-value" style="background: #FDFACC; width: 100%;">{{selectTableItem.plt_name}}
						</view>
					</view>

					<view class="info-line flex-h">
						<view class="info-title" style="width: 20%;">{{$t("functionSelect.listHeads.machineIndex")}}：</view>
						<view class="info-value" style="width: 30%;">{{showMacNumb}}</view>
						<view class="info-title" style="width: 20%;">{{$t("thickShow.wildAccount.detailDate")}}：</view>
						<view class="info-value" style="width: 30%;">{{selectTableItem.create_time}}</view>
					</view>

					<view class="draw-area">
						<image class="draw-img" :src="drawShotPath"></image>
					</view>

					<view class="input-area flex-v">
						<view class="info-title">{{$t("thickShow.wildAccount.checkResult")}}</view>
						<!-- <view class="input-str"></view> -->
						<textarea class="input-str" placeholder-style="color:#7f7f7f" placeholder="请输入检查结果" 
							v-model="wildContent"/>
					</view>

				</view>
			</view>
		</view>

		<view class="bottom-lay flex-h">
			<view class="btn" @click="onCancelClick">キャンセル</view>
			<view class="btn" style="color: #1890FF; margin-left: 1px;" @click="onConfirmClick">野帳</view>
		</view>

		<uni-popup id="dialogInput" ref="dialogInput" type="dialog">
			<wildRenameView :inWildTypeName="selectTableItem.book_til"
				:inContent="selectTableItem.file_name"
				@onConfirmClick="onRenameConfirm"
				@onCloseClick="onRenameClose">
			</wildRenameView>	
		</uni-popup>
	</view>
</template>

<script>
	import vTable from "@/components/table.vue";
	import selectData from "@/common/thick_show_data.js";
	import wildRenameView from "./wildRenameView.vue";
	
	import {
		requireThickBookDataByDmgCode,
		createThickBookData,
		deleteThickBookData,
		updateThickBookData
	} from "@/localService/thickBookService.js";

	export default {

		components: {
			vTable,
			wildRenameView
		},

		props: {
			drawShotPath: {
				type: String,
				default: ''
			},

			dmgCode: {
				type: Number,
				default: 0
			}
		},

		data() {
			return {
				headTitle: "",
				showType: 0, // 0:table  1:form
				headData: [],
				contentData: [],
				isOptEnable: false,
				selectTableItem: {},
				renameDefaultStr: '',
				showMacNumb: '',
				
				wildContent:''
			}
		},

		watch: {
			selectTableItem(val) {
				if (this.selectTableItem.dmg_code) {
					this.isOptEnable = true;
				} else {
					this.isOptEnable = false;
				}
			},

			showType: {
				handler(val) {
					this.headTitle = (val == 0 ? this.$t("thickShow.wildAccount.wildTitle") :
						this.$t("thickShow.wildAccount.wildTitleSecond"));
				},
				immediate: true
			}

		},

		mounted() {
			this.requireThickBookDataByDmgCodeApi(this.dmgCode);
			this.headData = selectData.wildAccountTableData.headData;
			this.headData.forEach(e => {
				e.title = this.$t(e.title);
			})
			this.contentData = [];
			this.showMacNumb = getApp().globalData.selectListItemData.mac_numb;
			this.$refs.dialogInput.open();
		},

		methods: {
			/**
			 * 查找野账
			 * @param {Object} inDmgCode
			 */
			requireThickBookDataByDmgCodeApi(inDmgCode) {
				console.log("requireThickBookDataByDmgCodeApi")
				requireThickBookDataByDmgCode(inDmgCode).then(e => {
					console.log("requireThickBookDataByDmgCodeApi")
					console.log(e)
					for (let i = 0; i < e.length; i++) {
						e.wildIndex = i + 1;
					}
					this.contentData = e;
				})
			},
			
			deleteThickBookDataApi(inDmgCode) {
				console.log("deleteThickBookDataApi")
				deleteThickBookData(inDmgCode).then(e => {
					console.log(e)
					this.requireThickBookDataByDmgCodeApi(this.dmgCode);
				})
			},

			createThickBookDataApi() {
				console.log("requireThickBookDataByDmgCodeApi")

				let obj = {};
				obj.dmg_code = getApp().globalData.selectListItemData.dmg_code;
				obj.book_no = 1;
				obj.book_til = this.$t("thickShow.wildAccount.wildAccount");
				obj.book_pass = "book_pass";
				obj.io_flg = 1;
				obj.plt_name = getApp().globalData.selectListItemData.plt_name;
				obj.mac_type = getApp().globalData.selectListItemData.mac_type;
				obj.is_fld_book = 1;
				obj.shot_path = "shot_path";
				obj.content = "content";
				obj.create_time = new Date().Format("yyyyMMddHHmmssS");
				obj.file_name = getApp().globalData.selectListItemData.plt_name +
					"_" + getApp().globalData.selectListItemData.mac_type_str +
					"_" + getApp().globalData.selectListItemData.mac_numb +
					"_" + obj.create_time;

				createThickBookData(obj).then(e => {
					console.log("createThickBookDataApi  re")
					console.log(e);

					this.requireThickBookDataByDmgCodeApi(this.dmgCode);
				})
			},
			
			updateThickBookDataApi(inObj) {
				updateThickBookData(this.dmgCode ,inObj).then(e => {
					this.showType = 0;
					this.requireThickBookDataByDmgCodeApi(this.dmgCode);
				})
			},
			
			onSelectionChange(e) {
				if (e.new.item != null)
					this.selectTableItem = e.new.item;
				else
					this.selectTableItem = {};
			},

			onCancelClick() {
				this.$emit("closePopup");
			},

			onConfirmClick() {
				if (this.showType == 0 && this.contentData.length == 0) {
					this.createThickBookDataApi();
					return;
				}

				if (!this.selectTableItem.dmg_code) {
					uni.showToast({
						title: "请选择一条数据",
						icon: null
					})
					return;
				} 
				
				if(this.showType == 0) {
					this.wildContent = this.selectTableItem.content;
					console.log("this.wildContent = this.selectTableItem.content")
					console.log(this.wildContent)
					console.log(this.selectTableItem.content)
					
					this.showType = 1;	
				}else {
					let tempObj = {};
					tempObj.content = this.wildContent;
					this.updateThickBookDataApi(tempObj);
				}

				
			},

			onDelClick() {
				if (this.selectTableItem == null) {
					uni.showToast({
						title: "请选择一条数据",
						icon: null
					})
				} else {
					this.deleteThickBookDataApi(this.dmgCode);
					this.selectTableItem = {};
				}
			},

			onRenameClick() {
				if (this.selectTableItem == null) {
					uni.showToast({
						title: "请选择一条数据",
						icon: null
					})
				} else {
					// 	this.renameTableItem(this.selectTableItem.id);
					this.renameDefaultStr = this.selectTableItem.fileName;
					this.$refs.dialogInput.open();
				}
			},

			renameConfirm(e) {
				console.log(e);
				this.selectTableItem.fileName = e;
			},
			
			onRenameConfirm(inTypeStr,inNameStr) {
				let tempObj = {};
				tempObj.book_til = inTypeStr;
				tempObj.file_name = inNameStr;
				
				this.updateThickBookDataApi(tempObj);
				this.$refs.dialogInput.close();
			},
			
			onRenameClose() {
				this.$refs.dialogInput.close();
			},
		}
	}
</script>

<style lang="scss">
	.rowClassName {
		font-size: 14rpx;
		color: #666666;
	}
	
	.root-lay {
		padding-top: var(--status-bar-height);
	}

	.head-lay {
		height: 35upx;
		position: relative;
		padding: 5upx;

		.head-title {
			margin: 0 auto;
			font-size: 25upx;
			font-weight: bold;
			color: #333333;
		}

		.head-right {
			position: absolute;
			right: 0;
			height: 100%;
			align-items: center;

			.head-tool {
				font-size: 18upx;
				color: #333333;
				margin-right: 10upx;
			}
		}
	}

	.content-lay {
		height: calc(50%);
		// background-color: #3F536E;
		border: 1px solid #E8E8E8;
		padding: 15upx;
	}

	.table-lay {
		padding: 1upx;
	}

	.bottom-lay {
		width: 100%;
		position: fixed;
		bottom: 0upx;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.1);
		padding: 1upx;

		.btn {
			width: 50%;
			height: 100%;
			background-color: #fff;
			color: #000;
			padding: 10upx;
			font-size: 17rpx;

			text-align: center;
		}
	}

	.form-lay {
		padding: 1upx;
		width: 55vw;
		position: relative;

		.info-line {
			align-items: center;
			width: 100%;
			margin-bottom: 10upx;

			.info-title {
				width: 40%;
				font-size: 14px;
			}

			.info-value {
				border-radius: 1px;
				width: 60%;
				border: 1px solid #CFD3D5;
				padding: 5upx;
				font-size: 14upx;
			}
		}

		.draw-area {
			padding: 10upx;
			border: 1px solid #CFD3D5;

			.draw-img {
				width: 100%;
				height: 40vh;
			}
		}

		.input-area {
			margin-top: 10upx;
			width: 55vw;
			.input-str {
				width: calc(100% - 10upx);
				margin-top: 10upx;
				padding: 15upx;
				border: 1px solid #CFD3D5;
			}
		}
	}
</style>
